<template>
	<view class="table-fill">
		<view class="t-col mb10">
			<text class="t-title">县（市、区）</text>
			<view class="t-content">
				<view class="list-area flex-bc pr50 pl15">
					<listSelect
						:defaultSelect="false"
						v-model="areaCode"
						:list="cityList"
						@confirm="confAreaCode"
						style="width: 185rpx"
					></listSelect>
					<listSelect :defaultSelect="false" v-model="areaCode2" :list="townList" style="width: 185rpx"></listSelect>
				</view>
			</view>
		</view>
		<view class="t-col mb10">
			<text class="t-title">工程单位</text>
			<view class="t-content">
				<view class="list-area">
					<u-input v-model="inspectProject.designUnit" />
				</view>
			</view>
		</view>
		<view class="t-col mb10">
			<text class="t-title">项目法人</text>
			<view class="t-content">
				<view class="list-area">
					<u-input v-model="inspectProject.projectEntity" />
				</view>
			</view>
		</view>
		<view class="t-col mb10">
			<text class="t-title">监理单位</text>
			<view class="t-content">
				<view class="list-area">
					<u-input v-model="inspectProject.supervisionUnit" />
				</view>
			</view>
		</view>
		<view class="t-col mb10">
			<text class="t-title">施工单位</text>
			<view class="t-content">
				<view class="list-area">
					<u-input v-model="inspectProject.constructionUnit" />
				</view>
			</view>
		</view>
		<template v-for="(item, index) in allList">
			<view class="title-col mt20" @click="item.open = !item.open">
				<text>检查项目{{ index + 1 }}:{{ item.name }}</text>
				<u-icon name="arrow-down-fill" v-show="!item.open" color="#607589" size="22"></u-icon>
				<u-icon name="arrow-up-fill" v-show="item.open" color="#607589" size="22"></u-icon>
			</view>
			<view v-show="item.open" class="open-box pr20">
				<safeCol
					v-for="(item, elINdex) in item.dataList"
					:key="elINdex"
					:index="elINdex"
					:data="item"
					class="mt10"
				></safeCol>
			</view>
		</template>

		<view class="title-col mt20" @click="open = !open">
			<text>检查中发现的其他问题</text>
			<u-icon name="arrow-down-fill" v-show="!this.open" color="#607589" size="22"></u-icon>
			<u-icon name="arrow-up-fill" v-show="this.open" color="#607589" size="22"></u-icon>
		</view>
		<view v-show="open" class="open-box">
			<view class="flex">
				<text class="fs26 fw600">其他问题:</text>
				<u-input
					class="fs26 ml10 mr20"
					type="textarea"
					:border="true"
					:height="180"
					placeholder="请输入内容"
					v-model="inspectProject.otherProblems"
				/>
			</view>
		</view>
		<!-- <safeCol v-for="(item, index) in dataList" :key="index" :data="item" class="mt10"></safeCol> -->

		<view class="submit-btn" @click="submit">提交</view>
	</view>
</template>
<script>
	import listSelect from '@/components/common/select/listSelect.vue'
	import sjsbApi from '@/api/yjzh/sjsb'
	export default {
		name: 'county-flood-warn',
		components: { listSelect, safeCol: () => import('./safeCol.vue') },
		data() {
			return {
				cityList: [],
				townList: [],
				areaCode: '',
				areaCode2: '',

				open: false,
				inspectProject: {
					constructionUnit: '',
					designUnit: '',
					extData: '',
					oneFileUrl: '',
					otherProblems: '',
					projectEntity: '',
					projectName: '',
					supervisionUnit: ''
				},

				allList: [
					{
						name: '度汛组织机构',
						open: false,
						dataList: [
							{
								title: '度汛组织机构是否建立',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '度汛责任是否明确',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '安全度汛目标责任书是否签订',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '度汛方案',
						open: false,
						dataList: [
							{
								title: '是否组织编制度汛方案',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '度汛方案是否报备',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否明确度汛标准',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否明确度汛形象要求',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否编制度汛措施',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '度汛措施是否审核',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '制度建设',
						open: false,
						dataList: [
							{
								title: '是否建立度汛（防汛）制度',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '超标准洪水应急预案及演练',
						open: false,
						dataList: [
							// ----
							{
								title: '是否编制超标准洪水应急预案',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否组织开展预案演练',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否参与预案演练',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '度汛检查',
						open: false,
						dataList: [
							{
								title: '是否组织度汛专项检查',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否参与度汛专项检查',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否组织度汛自查',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '防汛值守',
						open: false,
						dataList: [
							{
								title: '是否按要求安排防汛值班',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '水情预报及通讯',
						open: false,
						dataList: [
							{
								title: '是否能及时获取水雨情信息',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否具备良好的通讯设施',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					},
					{
						name: '防汛抢险队伍和物资',
						open: false,
						dataList: [
							{
								title: '是否组建防汛抢险队伍',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							},
							{
								title: '是否配备防汛物资及设备',
								isPracticable: true,
								problem: '',
								rectification: '',
								rectificationTime: '',
								content: '',
								fileUrl: []
							}
						]
					}
				]
			}
		},
		computed: {},
		mounted() {
			this.getUserInfoData = uni.getStorageSync('getUserInfoData')
			this.getDeptTreeData = uni.getStorageSync('getDeptTreeData')

			this.areaCode = this.getUserInfoData.dept.parentCode ? this.getUserInfoData.dept.parentCode : ''
			this.areaCode2 = this.getUserInfoData.dept.code
			let cityList = this.getDeptTreeData[0].children.map((item, index) => {
				return {
					label: item.name,
					value: item.code,
					extra: index,
					children: item.children
				}
			})
			this.cityList = cityList
			console.info(`cityList:`, cityList)
			let index = this.cityList.findIndex((el) => el.value == this.areaCode)
			if (index == -1) {
				index = 0
			}
			this.confAreaCode(null, this.cityList[index], false)
		},
		methods: {
			confAreaCode(value, item, isAdd = true) {
				this.townList = item.children.map((el, index) => {
					return {
						label: el.name,
						value: el.code,
						extra: index
					}
				})
				if (isAdd) {
					this.areaCode2 = this.townList[0].value
				}
				console.info(`:`, this.areaCode, this.areaCode2)
			},

			openOrg() {
				this.open = !this.open
			},
			openOrg2() {
				this.open2 = !this.open2
			},
			async submit() {
				let item = this.townList.find((el) => el.value == this.areaCode2)
				if (!item) {
					uni.showToast({
						icon: 'error',
						title: '请选择市县'
					})
					return
				}

				let data = {
					missionType: 2,
					areaName: item.label,
					areaCode: this.areaCode2,
					inspectProject: {
						constructionUnit: this.inspectProject.constructionUnit,
						designUnit: this.inspectProject.designUnit,
						extData: this.inspectProject.extData,
						oneFileUrl: this.inspectProject.oneFileUrl,
						otherProblems: this.inspectProject.otherProblems,
						projectEntity: this.inspectProject.projectEntity,
						projectName: this.inspectProject.projectName,
						supervisionUnit: this.inspectProject.supervisionUnit,
						checks: [],
						fileUrls: [],
						times: [],
						title: []
					}
				}
				this.allList.forEach((el) => {
					el.dataList.forEach((sin) => {
						data.inspectProject.checks.push(sin.isPracticable)
						data.inspectProject.fileUrls.push(sin.fileUrl)
						data.inspectProject.times.push(sin.rectificationTime)
						data.inspectProject.title.push(sin.title)
					})
				})
				try {
					uni.showLoading({
						title: '正在提交'
					})
					const resp = await sjsbApi.securitycheckAdd2(data)

					if (resp.code == 200) {
						uni.showLoading({
							title: '提交成功'
						})
					}
					setTimeout(() => {
						this.$hideLoading()
					}, 500)
				} catch (error) {
					console.error(error)
					this.$hideLoading()
				}
			}
			// changeFolderName(value) {
			// 	this.folderName = value
			// }
		}
	}
</script>
<style lang="less" scoped>
	.table-fill {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;
		overflow: auto;
		.t-col {
			width: 100%;
			display: flex;
			height: 66rpx;
			align-items: center;
			.t-title {
				width: 230rpx;
				text-align: center;
			}
			.t-content {
				display: flex;
				flex: 1;
				.list-area {
					background: #ffffff;
					border: 1rpx solid #aeaeae;
					border-radius: 4rpx;
					height: 66rpx;
					width: 90%;
					display: flex;
					align-items: center;
					// box-shadow: inset 0rpx 10rpx 30rpx rgba(0, 133, 255, 0.12);
				}
				/deep/.uni-input-input {
					text-indent: 15rpx;
				}
				/deep/.uni-input-placeholder {
					text-indent: 15rpx;
				}
			}
		}
		.title-col {
			width: 750rpx;
			height: 73rpx;
			background: #edf5ff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx;
			color: #0085ff;
			font-weight: 600;
		}
		.open-box {
			width: 100%;
			padding-left: 80rpx;
		}
		.submit-btn {
			width: 636rpx;
			height: 80rpx;
			background: #41a4ff;
			backdrop-filter: blur(15rpx);
			/* Note: backdrop-filter has minimal browser support */

			border-radius: 20rpx;
			display: flex;
			align-items: center;
			font-weight: 600;
			justify-content: center;
			font-size: 30rpx;
			color: #ffffff;
			margin: 100rpx auto;
		}
	}
</style>
